import Vue from 'vue'
import VueRouter from 'vue-router'
// @符号只带src
import My from '@/views/my'
import Find from '@/views/find'
import Friend from '../views/friend'
import NotFound from '@/views/not-found'
import FriendA from '@/views/friend-a'
import FriendB from '@/views/friend-b'
import FriendC from '@/views/friend-c'

// Vue使用VueRouter插件 => 内部实现路由的逻辑并且他会注册2个全局组件
// router-view 占位作用
Vue.use(VueRouter)

/**
 * 233 - 233
 * vue2 vue-router3 vuex3 vue2安装vue-router一定要带版本3  根据笔记我们装3.5.3
 * vue3 vue-router4 vuex4
 * VueRouter 基本使用 5步 + 核心步骤 2步
 * 5步基本使用
 * 1. 安装3.5.3 - vue-router 注意版本
 * 2. main.js要import VueRouter
 * 3. Vue.use(xxx插件) - Vue相关生态插件在引入后，都要使用use方法，意思就是Vue要使用这个插件
 *    Vue有规定各个插件必须要实现对应的方法
 * 4. 实例化对象  new VueRouter
 * 5. 将实例化对象注入new Vue实例中
 * 
 * 铺垫 先新建对应的页面组件 在配置核心2步骤
 *  views - 页面组件
 *  components - 复用组件
 * 2步核心步骤
 *  2.1 配置路由规则 - 映射关系
 *      在实例化VueRouter的时候传入对象 属性是routes
 *      语法 就是 配置routes数组 路由规则 因为有多条映射 所以是数组
 *        数组里每一项是个对象 
 *      routes: [
 *        {
 *          path: '路径名'
 *          component: 页面组件
 *        },
 *        {...}
 *      ] 
 *  2.2 指定路由出口 - 还记得挖坑？意思就是占个位置
 *    占个位置语法是什么 就是用全局组件 router-view
 */

/**
 * router 这个全局最大的VueRouter实例 - js 跳转页面相关方法就是用router
 * routes 没有带r的routes - 配置多个路由映射规则 路由信息规则数组
 * route - 对应的路由信息 在我们每个页面组件里可以使用，表示当前的路由全部信息
 */
const router = new VueRouter({
    mode: 'history',
    // 可以修改高亮的类名 - 但实际用的不多 了解即可
    // linkActiveClass: 'sf-active',
    // linkExactActiveClass: 'sf-exact-active',
    // 重定向 指定默认显示的页面组件 默认的访问路径是/所以找不到对应的页面组件
    // 需要重定向设置默认页面组件 redirect: 路径

    // 404页面 一般规范就写在最后 path:"*" 任意路径
    // 建议写最后 写第一个 貌似也是找对应规则里面有没有对应的，有对应的就会渲染对应的页面组件
    routes: [
        {
            path: '/',
            redirect: '/my/35'
        },
        {
            path: '/my/:xxx',
            name: 'my',
            component: My,
        },
        {
            path: '/find',
            name: 'abc',
            component: Find,
        },
        {
            path: '/part',
            name: 'friend',
            component: Friend,
            // children 字段 配二级路由 一般不带杠使用拼接的方式
            redirect: '/part/a',
            children: [
                // 如果不写斜杠 代表拼接 
                {
                    // /part/friendA
                    path: 'friendA',
                    component: FriendA,
                },
                {
                    path: 'b',
                    component: FriendB,
                },
                // 如果写了斜杠，直接根路径访问 直接访问/c就可以了
                {
                    path: '/c',
                    component: FriendC,
                }
            ]
        },
        {
            path: '*',
            component: NotFound
        },
    ]
})

/**
 * ?相关的传参 query
 * /动态路由 params
 * 
 * 对象里写法 完整 path（会忽略prams） 和 name（不会忽略params）
 */

export default router